<template>
	<view class="rank-page">
		<view class="rank-scroll">
			<u-tabs ref="tabs" :list="list" active-color="#3e8ef7" inactive-color="#9a9a9a" :active-item-style="itemtab" font-size="34" :current="current" @change="change" duration="0"></u-tabs>
			<view class="tabstl">
				<view class="tb-l">
					交易品名称
				</view>
				<view class="tb-r">
					<view>
						最新价
					</view>
					<view>
						涨幅
					</view>
					<view>
						成交量
					</view>
				</view>
			</view>
			<scroll-view :scroll-top="scrollTopnum" class="scroll-view_H" scroll-y="true" :scroll-into-view='scroll_name' :style="{height:windowHeight-scrollHieght+'px'}" @scroll="scrollmove" @scrolltolower='scrollmarket'>
				<bnn-loading :loading="wsData.length === 0" />
				<view class="item-sp" :id="item.product_id" v-for="(item,index) in wsData" @tap="linkTo(item,index)" :key="index" v-if="isShowNum===1&&item.master||isShowNum===6&&item.night||item.exchange_id===list[isShowNum].code">
						<view class="sp-l">
							<view class="sp-l-t">
								{{item.name}}
							</view>
							<view class="sp-l-m">
								<view class="sp-l-m-1" v-if="item.master">
									主
								</view>
								<view class="sp-l-m-2" v-if="item.exchange_id==='CFFEX'">
									中金所
								</view>
								<view class="sp-l-m-2" v-else-if="item.exchange_id==='SHFE'">
									上期所
								</view>
								<view class="sp-l-m-2" v-else-if="item.exchange_id==='DCE'">
									大商所
								</view>
								<view class="sp-l-m-2" v-else-if="item.exchange_id==='CZCE'">
									郑商所
								</view>
								<view class="sp-l-m-2" v-else-if="item.exchange_id==='INE'">
									能源中心
								</view>
							</view>
						</view>
						<view class="sp-r">
								<view v-if="item.hlFlag==='1'" class="new-price redprise" :class="item.font==1?'font':''">
								{{item.last_price==0?'--':item.last_price}}
								</view>
								<view v-else-if="item.hlFlag==='0'" class="new-price greenprise" :class="item.font==1?'font':''">
								{{item.last_price==0?'--':item.last_price}}
								</view>
								<view v-else class="new-price rayprise" :class="item.font==1?'font':''">
								{{item.last_price==0?'--':item.last_price}}
								</view>
							<view class="up-data" v-if="item.hlFlag==='1'">
								{{'+'+item.hl+'%'}}
							</view>
							<view class="down-data" v-else-if="item.hlFlag==='0'">
								{{item.hl+'%'}}
							</view>
							<view class="stop-data" v-else>
								{{item.hl+'%'}}
							</view>
							<view class="turnover">
								{{item.volume==0?'--':item.volume}}
							</view>
						</view>
				</view>
				<view class="item-sp" v-for="(item,index) in wsData" :key="index" v-if="isShowNum===0" :id="item.product_id"
				 @tap="linkTo(item,index)">
					<view class="sp-l">
						<view class="sp-l-t">
							{{item.name}}
						</view>
						<view class="sp-l-m">
							<view class="sp-l-m-1" v-if="item.master">
								主
							</view>
							<view class="sp-l-m-2" v-if="item.exchange_id==='CFFEX'">
								中金所
							</view>
							<view class="sp-l-m-2" v-else-if="item.exchange_id==='SHFE'">
								上期所
							</view>
							<view class="sp-l-m-2" v-else-if="item.exchange_id==='DCE'">
								大商所
							</view>
							<view class="sp-l-m-2" v-else-if="item.exchange_id==='CZCE'">
								郑商所
							</view>
							<view class="sp-l-m-2" v-else-if="item.exchange_id==='INE'">
								能源中心
							</view>
						</view>
					</view>
					<view class="sp-r">
						<view v-if="item.hlFlag==='1'" class="new-price redprise" :class="item.font==1?'font':''">
						{{item.last_price===0?'-':item.last_price}}
						</view>
						<view v-else-if="item.hlFlag==='0'" class="new-price greenprise" :class="item.font==1?'font':''">
						{{item.last_price===0?'-':item.last_price}}
						</view>
						<view v-else class="new-price rayprise" :class="item.font==1?'font':''">
						{{item.last_price===0?'-':item.last_price}}
						</view>
						<view class="up-data" v-if="item.hlFlag==='1'">
							{{'+'+item.hl}}%
						</view>
						<view class="down-data" v-else-if="item.hlFlag==='0'">
							{{item.hl}}%
						</view>
						<view class="stop-data" v-else>
							{{item.hl}}
						</view>
						<view class="turnover">
							{{item.volume===0?'-':item.volume}}
						</view>
					</view>
				</view>
				<view class="myself-add" @click="addUser" v-if="isShowNum===0">
					<view class="myself-add-t">
						<u-icon name="plus-circle"></u-icon>添加自选
					</view>
				</view>
			</scroll-view>
			<view class="bottom-wrap" v-show="current!=0">
				<u-tabs :list="sublist" :show-bar="false" :current="subCurrent" @change="changeSub"></u-tabs>
			</view>
		</view>
	</view>
</template>

<script>
	// import io from '@/static/socket.io.js'
	// import {getSocket} from '@/static/socket.js'
	import {
		SOCKET_URL
	} from '@/config/index.js'
	import {
		toRankSearchPage
	} from '@/utils/PageRouter.js'
	import {
		getRankList,
		setRankList
	} from '@/utils/storage.js'
	import {
		getTable
	} from '@/api/rank.js'
	import {
		myFutures
	} from '@/api/default.js'
	import FloatLayoutOne from '@/components/custom-ui/float-layout/float-layout-one/index.vue'
	import BnnLoading from '@/components/bnn-ui/loading/index.vue'
	// import io from 'socket.io-client'
	// const socket = io('http://192.168.0.245:8083')

	//let io = io.listen(server);
	//const socket = io.connect('ws://47.102.157.67:8080/')
	const SOCKTURL = 'ws://47.102.157.67:8080/'
	let wholeModel = 'CFFEX'
	export default {
		components: {
			FloatLayoutOne,
			BnnLoading
		},
		watch: {

		},
		data() {
			const list = getRankList()
			return {
				itemtab:{
					backgroundColor:''
				},
				myData:[],
				status:'loading',
				state:true,
				myFuturesData:[],
				ischange: false,
				socketTask: null,
				// 确保websocket是打开状态
				is_open_socket: false,
				isInit: true,
				dataList: list,
				wsData: [], // 保存 websocket 数据对象
				makeData:[],
				CFFEXdata:[],//中金所
				cfdata:[],
				SHFEdata:[],//上期所
				shdata:[],
				DCEdata:[],//大商所
				dcdata:[],
				CZCEdata:[],//郑商所
				czdata:[],
				nightData:[],//夜盘
				niData:[],
				list: [{
						name: '自选',
						code: ''
					},
					{
						name: '主力合约',
						code: ''
					},
					{
						name: '中金所',
						code: 'CFFEX'
					},
					{
						name: '上期所',
						code: 'SHFE'
					},
					{
						name: '大商所',
						code: 'DCE'
					},
					{
						name: '郑商所',
						code: 'CZCE'
					},
					// {
					// 	name: '能源交易所',
					// 	code: 'INE'
					// },
					// {
					// 	name: '上交所',
					// 	code: 'SSE'
					// },
					// {
					// 	name: '深交所',
					// 	code: 'SZSE'
					// },
					// {
					// 	name: '国际原油'
					// },
					{
						name: '夜盘',
						code: ''
					}
				],
				sublist: [],
				subCurrent: 0,
				current: 1,
				swiperCurrent: 1, 
				isShowNum: 1,
				mainId: '', //主力合约
				model: 'CFFEX',
				windowHeight: 0,
				scrollHieght:117,
				scroll_name: '',
				istime:false,
				allData:[],
				index:'',
				mlength:15,//显示数据长度
				Num:10,//记录改动数值
				toplength:0,
				inidata:[],//主力 
				zhongdata:[],//中金所
				shangdata:[],//上期所
				dadata:[],//大商所
				zhengdata:[],//郑商所
				yedata:[],//夜盘
				scrollTopnum:0,
				changelength:0,//记录 滑到某一条
				changeData:[] //记录推送
			}
		},
		onLoad() {	
			this.scrollTopnum=0
			try {							
				this.allData=uni.getStorageSync('zuli_key')
				if(this.allData){
					this.wsData=this.allData
					for(let i=0;i<10;i++){
					// this.makeData.push(this.allData[i])
					this.inidata.push(this.allData[i].instrument_id)
					}
				}else{
					this.getsortData()
				}
				// this.index =this.allData.length
				//中金所
				// 	}
				// })
				this.cfdata=uni.getStorageSync('CFFEX_key')
				for(let i=0;i<10;i++){
					// this.CFFEXdata.push(this.cfdata[i])
					this.zhongdata.push(this.cfdata[i].instrument_id)
				}
				//上期所
				// })
				this.shdata=uni.getStorageSync('SHFE_key')
				for(let i=0;i<10;i++){
					// this.SHFEdata.push(this.shdata[i])
					this.shangdata.push(this.shdata[i].instrument_id)
				}
				//大商所
				// })
				this.dcdata=uni.getStorageSync('DCE_key')//大商
				for(let i=0;i<10;i++){
					// this.DCEdata.push(this.dcdata[i])
					this.dadata.push(this.dcdata[i].instrument_id)
				}
				//CZCEdata:[],//郑商所
				//
				this.czdata=uni.getStorageSync('CZCE_key')
				for(let i=0;i<10;i++){
					// this.CZCEdata.push(this.czdata[i])
					this.zhengdata.push(this.czdata[i].instrument_id)
				}
				//夜盘
				this.niData=uni.getStorageSync('ninght_key')
				for(let i=0;i<20;i++){
					this.yedata.push(this.niData[i])
					this.nightData.push(this.niData[i].instrument_id)
				}
			} catch (e) {
			    // error
			}
			uni.$on('page-popup', data => {
				if (data.show) {
					this.$refs['showtype'].open()
				} else {
					this.$refs['showtype'].close()
				}
			})
			//获取行情类型
			this.getTableData()
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight
				}
			});
			uni.setNavigationBarTitle({
				title: this.list[this.current].name
			})
			// this.connectSocketInit()
			// var ws = new WebSocket("ws://47.102.157.67:8080/");
			// ws.onopen = function() {
			// 	// Web Socket 已连接上，使用 send() 方法发送数据
			// 	ws.send("发送数据");
			// };
			// ws.onmessage = function(evt) {
			// 	var received_msg = evt.data;
			// };
			// ws.onclose = function() {
			// 	// 关闭 websocket
			// };		
		},
		onShow() {
			// this.current=1
			this.state=true
			this.topFn()
			this.myFutures()
			// this.getTableData()
			//this.getRank()
			// this.getsortData()
			this.checkOpenSocket(); //判断websocket是否已连接
			// this.connectSocketInit()
		},
		onHide() {
			// if(this.state&&getApp().globalData.isHide){
			// 	this.closeSocket();
			// }
			if(this.state){
				this.closeSocket();
				// let idata={tag: 'change',push:2,addr:'',my:[],}
				// getApp().globalData.socketTask.send({
				// 	data: JSON.stringify(idata),
				// 	async success() {
						
				// 	},
				// });
			}
		},
		onNavigationBarButtonTap:function(e){
			 uni.navigateTo({
			 	url:'./ranksearch/ranksearch?index=0'
			 })
		},
		// onTabItemTap(obj){
		// },
		onPullDownRefresh() {
		    // setTimeout(function () {
		    //      uni.stopPullDownRefresh();
		    // }, 1000);
		},
		methods: {
			topFn(){
				this.scrollTopnum=0
			},
			scrollmove(event){//上滑
				let {scrollTop,scrollHeight}=event.detail
				let length=this.wsData.length //显示长
				// if(scrollTop>this.toplength){//判断 下滑
					let itemLength=scrollHeight/length  //获取每条数据高度
					let slength=parseInt(scrollTop/itemLength)
					let newleng=slength+10
					let newData=[]
				if(this.current==1){					
					for(let i=slength;i<newleng;i++){
						newData.push(this.allData[i].instrument_id)
					}
				}else if(this.current==2){					
					for(let i=slength;i<newleng;i++){
						newData.push(this.cfdata[i].instrument_id)
					}
				}else if(this.current==3){				
					for(let i=slength;i<newleng;i++){
						newData.push(this.shdata[i].instrument_id)
					}
				}else if(this.current==4){				
					for(let i=slength;i<newleng;i++){
						newData.push(this.dcdata[i].instrument_id)
					}
				}else if(this.current==5){				
					for(let i=slength;i<newleng;i++){
						newData.push(this.czdata[i].instrument_id)
					}
				}else if(this.current==6){					
					for(let i=slength;i<newleng;i++){
						newData.push(this.niData[i].instrument_id)
					}
				}else{				
					let mynum=this.myFuturesData.length
					for(let i=slength;i<newleng;i++){
						if(i<=mynum){
							newData.push(this.myFuturesData[i].instrument_id)
						}
					}
				}
				
				let idata={tag: 'change',push:1,addr:'',my:newData}
				this.changeData=idata
				getApp().globalData.socketTask.send({
					data: JSON.stringify(idata),
					async success() {
						
					},
				});
					// if(scrollTop>itemLength){
					// }
					// this.mlength+=1
					// this.wsData.push(this.allData[this.mlength])//尾部增加
					// if(this.mlength>15){//判断删除
					// 	this.wsData.shift();   //删除第一个
					// 	// this.wsData.splice(this.Num,1) //删除
					// 	this.Num+=1 //记录数据某一条
					// }			
				// }else{//上滑
					// this.wsData.unshift(this.allData[this.Num])//头部增加
					// this.Num-=1
					// if(this.Num<=0){
					// 	this.Num=0
					// }
					// if(this.mlength>15){
					// 	this.wsData.pop();  // 删除最后一个						
					// }
				// }
				this.changelength=slength
				this.toplength=scrollTop
				
			},
			touppemarket(){
				if(this.current==1){
					let length=this.wsData.length
					let forlength=length+10
					let num=this.allData.length
					if(length<=num){
						for(let i=length;i<forlength;i++){
							if(i<num){
								this.wsData.unshift(this.allData[this.Num])
								// this.wsData.push(this.allData[i])
							}
						}
						if(length>20){							
							this.wsData.splice(this.Num,10) //删除
						}
					}
				}else if(this.current==2){
					let length=this.wsData.length
					let forlength=length+10
					let num=this.cfdata.length
					if(length<=num){
						for(let i=length;i<forlength;i++){
							if(i<num){
								this.wsData.push(this.cfdata[i])
							}
						}
					}
				}else if(this.current==3){
					let length=this.wsData.length
					let forlength=length+10
					let num=this.shdata.length
					if(length<=num){
						for(let i=length;i<forlength;i++){
							if(i<num){
								this.wsData.push(this.shdata[i])
							}
						}
					}
				}else if(this.current==4){
					let length=this.wsData.length
					let forlength=length+10
					let num=this.dcdata.length
					if(length<=num){
						for(let i=length;i<forlength;i++){
							if(i<num){
								this.wsData.push(this.dcdata[i])
							}
						}
					}
				}else if(this.current==5){
					let length=this.wsData.length
					let forlength=length+10
					let num=this.czdata.length
					if(length<=num){
						for(let i=length;i<forlength;i++){
							if(i<num){
								this.wsData.push(this.czdata[i])
							}
						}
					}
				}else if(this.current==6){
				}
			},
			scrollmarket(event){
				// if(this.current==1){
				// 	let length=this.wsData.length
				// 	// let num=this.Num
				// 	let forlength=length+10
				// 	let num=this.allData.length
				// 	if(length<=num){
				// 	this.status = 'loading';
				// 		for(let i=length;i<forlength;i++){
				// 			if(i<num){
				// 				this.wsData.push(this.allData[i])
				// 				// this.Num+=1
				// 			}else{
				// 				this.status = 'nomore'
				// 			}
				// 		}
				// 	}
				// }else if(this.current==2){
				// 	let length=this.wsData.length
				// 	let forlength=length+10
				// 	let num=this.cfdata.length
				// 	if(length<=num){
				// 		for(let i=length;i<forlength;i++){
				// 			if(i<num){
				// 				this.wsData.push(this.cfdata[i])
				// 			}
				// 		}
				// 	}
				// }else 
				if(this.current==3){
					let length=this.wsData.length
					let forlength=length+10
					let num=this.shdata.length
					if(length<=num){
						for(let i=length;i<forlength;i++){
							if(i<num){
								this.wsData.push(this.shdata[i])
							}
						}
					}
				}else if(this.current==4){
					let length=this.wsData.length
					let forlength=length+10
					let num=this.dcdata.length
					if(length<=num){
						for(let i=length;i<forlength;i++){
							if(i<num){
								this.wsData.push(this.dcdata[i])
							}
						}
					}
				}else if(this.current==5){
					let length=this.wsData.length
					let forlength=length+10
					let num=this.czdata.length
					if(length<=num){
						for(let i=length;i<forlength;i++){
							if(i<num){
								this.wsData.push(this.czdata[i])
							}
						}
					}
				}else if(this.current==6){
					let length=this.wsData.length
					let forlength=length+20
					let num=this.niData.length
					if(length<=num){
						for(let i=length;i<forlength;i++){
							if(i<num){
								this.wsData.push(this.niData[i])
							}
						}
					}
				}
			},
			myFutures(){//获取自选
				const userInfo = uni.getStorageSync('MEMBER_INFO')
				let {id}=userInfo
				let eng=-1
				if(id){
				eng=id	
				}else{
				eng=-1
				}
				// this.myFutures(id)
				uni.request({
					url:'https://md.sou-liang.com/api/myFutures',
					// url:'http://192.168.1.3:9500/api/myFutures',
					data: {id:eng},
					success: (res) => {
						let num=res.data.length
						// this.wsData=this.myFuturesData
						try{
							if(num!=0){
								this.myFuturesData=res.data
								this.myData=[]
								for(let i=0;i<10;i++){
									if(i<num)this.myData.push(this.myFuturesData[i].instrument_id);													
								}
							}							
						}catch(e){
							// error
						}
					}
				})
			},
			getsortData(){//当没获取到行情
				uni.request({
					url:'https://md.sou-liang.com/api/sortData',
					// url:'http://192.168.1.3:9500/api/myFutures',
					// data: {id:eng},
					success: (res) => {
						this.allData=res.data.master
						if(this.current==1)this.wsData=this.allData;
						this.shdata=res.data.shfe  //上期
						this.dcdata=res.data.dce //大商
						this.czdata=res.data.czce //郑商
						this.cfdata=res.data.cffex  //中金
						this.niData=res.data.night  //夜盘
						// if(this.current==1){
						// 	this.wsData=this.allData
						// }else 
						if(this.current==2){
							this.wsData=this.cfdata
						}else if(this.current==3){
							this.wsData=this.shdata
						}else if(this.current==4){
							this.wsData=this.DCEdata
						}else if(this.current==5){
							this.wsData=this.CZCEdata
						}else if(this.current==6){
							this.wsData=this.yedata
						}else if(this.current==0){
							this.wsData=this.myFuturesData
						}
						this.inidata=[]
						if(res.data.master.hasOwnProperty('hl')){
							
						}else{
							res.data.master['hl']='0';
						}
						uni.setStorageSync('zuli_key', res.data.master)//主力
						for(let i=0;i<10;i++){
							this.inidata.push(this.allData[i].instrument_id)
						}																					
						//上期所								
						// this.shdata=thevalue
						uni.setStorageSync('SHFE_key', res.data.shfe)//上期
						this.shangdata=[]
						this.SHFEdata=[]
						if(res.data.shfe.hasOwnProperty('hl')){
							
						}else{
							res.data.shfe['hl']='0';
						}
						for(let i=0;i<20;i++){
							this.SHFEdata.push(this.shdata[i])
							this.shangdata.push(this.shdata[i].instrument_id)
						}
						//大商所
						// this.dcdata=fvalue
						uni.setStorageSync('DCE_key', res.data.dce)//大商
						this.dadata=[]
						this.DCEdata=[]
						for(let i=0;i<20;i++){
							this.DCEdata.push(this.dcdata[i])
							this.dadata.push(this.dcdata[i].instrument_id)
						}
						//CZCEdata:[],//郑商所
						
						// this.czdata=fivalue
						uni.setStorageSync('CZCE_key', res.data.czce)//郑商
						this.zhengdata=[]
						this.CZCEdata=[]
						for(let i=0;i<20;i++){
							this.CZCEdata.push(this.czdata[i])
							this.zhengdata.push(this.czdata[i].instrument_id)
						}
						// this.scroll_name=arr[0].product_id
						uni.setStorageSync('ninght_key', res.data.night)//夜
						this.nightData=[]
						this.yedata=[]
						for(let i=0;i<20;i++){
							this.yedata.push(this.niData[i])
							this.nightData.push(this.niData[i].instrument_id)
						}
						//中金所
						// })
						if(arr.cffex.length!=0){
							uni.setStorageSync('CFFEX_key', arr.cffex)//中金
							this.zhongdata=[]
							// this.cfdata=twovalue
							for(let i=0;i<10;i++){
								// this.CFFEXdata.push(this.cfdata[i])
								this.zhongdata.push(this.cfdata[i].instrument_id)
							}
						}
					}
				})
			},
			
			getTableData() {
				this.sublist = [{
					name: '债二',
					product_id: 'TS'
					}, {
					name: '债五',
					product_id: 'TF'
					}, {
					name: '债十',
					product_id: 'T'
					}, {
					name: '沪深',
					product_id: 'IF'
					}, {
					name: '上证',
					product_id: 'IH'
					}, {
					name: '中证',
					product_id: 'IC'
					}, {
					name: '不锈钢',
					product_id: 'ss'
					}, {
					name: '橡胶',
						product_id: 'ru'
					}, {
					name: '沥青',
					product_id: 'bu'
					}, {
					name: '泸银',
					product_id: 'ag'
					}, {
					name: '泸金',
					product_id: 'au'
					}, {
					name: '热卷',
					product_id: 'hc'
					}, {
					name: '螺纹',
					product_id: 'rb'
					}, {
					name: '沪铜',
					product_id: 'cu'
					}, {
					name: '沪锌',
					product_id: 'zn'
					}, {
					name: '沪铝',
					product_id: 'al'
					}, {
					name: '沪铅',
					product_id: 'pb'
					}, {
					name: '沪锡',
					product_id: 'sn'
					}, {
					name: '沪镍',
					product_id: 'ni'
					}, {
					name: '燃油',
					product_id: 'fu'
					}, {
					name: '线材',
					product_id: 'wr'
					}, {
					name: '纸浆',
					product_id: 'sp'
					}, {
					name: 'LPG',
					product_id: 'pg'
					}, {
					name: 'PP',
					product_id: 'pp'
					}, {
					name: 'PVC',
					product_id: 'v'
					}, {
					name: '塑料',
					product_id: 'l'
					}, {
					name: '桐榈',
					product_id: 'p'
					}, {
					name: '淀粉',
					product_id: 'cs'
					},{
					name: '焦炭',
					product_id: 'j'
					}, {
					name: '焦煤',
					product_id: 'jm'
					}, {
					name: '玉米',
					product_id: 'c'
					}, {
					name: '甘醇',
					product_id: 'eg'
					}, {
					name: '粳米',
					product_id: 'rr'
					}, {
					name: '纤板',
					product_id: 'fb'
					}, {
					name: '胶板',
					product_id: 'bb'
					}, {
					name: '苯乙烯',
					product_id: 'eb'
					}, {
					name: '豆一',
					product_id: 'b'
					}, {
					name: '豆二',
					product_id: 'a'
					}, {
					name: '豆油',
					product_id: 'y'
					}, {
					name: '豆粕',
					product_id: 'm'
					}, {
					name: '铁矿',
					product_id: 'i'
					}, {
					name: '鸡蛋',
					product_id: 'jd'
					}, {
					name: '尿素',
					product_id: 'UR'
					}, {
					name: '强麦',
					product_id: 'WH'
					}, {
					name: '早稻',
					product_id: 'RI'
					}, {
					name: '晚稻',
					product_id: 'LR'
					}, {
					name: '普麦',
					product_id: 'PM'
					}, {
					name: '棉纱',
					product_id: 'CY'
					}, {
					name: '棉花',
					product_id: 'CF'
					}, {
					name: '玻璃',
					product_id: 'FG'
					}, {
					name: '甲醇',
					product_id: 'MA'
					}, {
					name: '白糖',
					product_id: 'SR'
					}, {
					name: '短纤',
					product_id: 'PF'
					}, {
					name: '硅铁',
					product_id: 'SF'
					}, {
					name: '粳稻',
					product_id: 'JR'
					}, {
					name: '红枣',
					product_id: 'CJ'
					}, {
					name: '纯碱',
					product_id: 'SA'
					}, {
					name: '苹果',
					product_id: 'AP'
					}, {
					name: '菜油',
					product_id: 'OI'
					}, {
					name: '菜籽',
					product_id: 'RS'
					}, {
					name: '菜粕',
					product_id: 'RM'
					}, {
					name: '郑煤',
					product_id: 'AP'
					}, {
					name: '锰硅',
					product_id: 'SM'
				}]
				this.scroll_name = this.sublist[0].product_id
			},
			changeSub(current) {
				this.subCurrent = current
				this.scroll_name = this.sublist[current].product_id
				if(this.current==3){
					this.wsData=this.shdata
				}else if(this.current==4){
					this.wsData=this.dcdata
				}else if(this.current==5){
					this.wsData=this.czdata
				}else if(this.current==6){
					this.wsData=this.niData
				}
			},									
			change(numbers) {
				// this.scrollTopnum=0
				this.current = numbers
				this.isShowNum = numbers
				this.swiperCurrent = numbers;
				uni.setNavigationBarTitle({
					title: this.list[this.current].name
				})
				// this.itemtab.backgroundColor="#d5d5d6"				
				if (numbers === 1) {
					this.wsData=this.allData
					// this.wsData=[]
					// this.index=1
					// this.topFn()
					this.scrollHieght=117
					this.getTableData()
					let idata=''
					if(this.changelength==0){						
						idata={tag: 'change',push:1,addr:'',my:this.inidata,}
					}else{
						let num=this.changelength
						let rnum=this.changelength+10
						let cdata=[]
						for(let i=num;i<rnum;i++){
							cdata.push(this.allData[i].instrument_id)
						}
						idata={tag: 'change',push:1,addr:'',my:cdata,}
					}
					this.changeData=idata
					getApp().globalData.socketTask.send({
						data: JSON.stringify(idata),
						async success() {
							
						},
					});
					// this.wsData=this.makeData
				} else if (numbers === 2) {
					this.wsData=this.cfdata
					let idata=''
					if(this.changelength==0){
						idata={tag: 'change',push:1,addr:'',my:this.zhongdata,}
					}else{
						let num=this.changelength
						let rnum=this.changelength+10
						let cdata=[]
						for(let i=num;i<rnum;i++){
							cdata.push(this.cfdata[i].instrument_id)
						}
						idata={tag: 'change',push:1,addr:'',my:cdata,}
					}
					this.changeData=idata
					getApp().globalData.socketTask.send({
						data: JSON.stringify(idata),
						async success() {
							
						},
					});
					this.scrollHieght=117
					this.sublist = [{
						name: '债二',
						product_id: 'TS'
						}, {
						name: '债五',
						product_id: 'TF'
						}, {
						name: '债十',
						product_id: 'T'
						}, {
						name: '沪深',
						product_id: 'IF'
						}, {
						name: '上证',
						product_id: 'IH'
						}, {
						name: '中证',
						product_id: 'IC'
					}]
									
				} else if (numbers === 3) {
					this.wsData=this.SHFEdata
					// this.wsData=this.shdata 
					this.scrollHieght=117
					let num=this.changelength
					let idata=''
					if(num==0){
						idata={tag: 'change',push:1,addr:'',my:this.shangdata,}
					}else{
						let rnum=num+10
						let cdata=[]
						for(let i=num;i<rnum;i++){
							cdata.push(this.shdata[i].instrument_id)
						}
						idata={tag: 'change',push:1,addr:'',my:cdata}
					}
					// let data=idata
					this.changeData=idata
					getApp().globalData.socketTask.send({
						data: JSON.stringify(idata),
						async success() {
							
						},
					});
					this.sublist = [{
						name: '不锈钢',
						product_id: 'ss'
						}, {
						name: '橡胶',
						product_id: 'ru'
						}, {
						name: '沥青',
						product_id: 'bu'
						}, {
						name: '泸银',
						product_id: 'ag'
						}, {
						name: '泸金',
						product_id: 'au'
						}, {
						name: '热卷',
						product_id: 'hc'
						}, {
						name: '螺纹',
						product_id: 'rb'
						}, {
						name: '沪铜',
						product_id: 'cu'
						}, {
						name: '沪锌',
						product_id: 'zn'
						}, {
						name: '沪铝',
						product_id: 'al'
						}, {
						name: '沪铅',
						product_id: 'pb'
						}, {
						name: '沪锡',
						product_id: 'sn'
						}, {
						name: '沪镍',
						product_id: 'ni'
						}, {
						name: '燃油',
						product_id: 'fu'
						}, {
						name: '线材',
						product_id: 'wr'
						}, {
						name: '纸浆',
						product_id: 'sp'
					}]
										
				} else if (numbers === 4) {					
					this.scrollHieght=117					
					// this.wsData=this.dcdata
					this.wsData=this.DCEdata
					// let idata={tag: 'change',push:1,addr:'',my:this.dadata}
					let idata=''
					let num=this.changelength
					if(num==0){
						idata={tag: 'change',push:1,addr:'',my:this.dadata}
					}else{
						let rnum=num+10
						let cdata=[]
						for(let i=num;i<rnum;i++){
							cdata.push(this.dcdata[i].instrument_id)
						}
						idata={tag: 'change',push:1,addr:'',my:cdata}
					}
					this.changeData=idata
					getApp().globalData.socketTask.send({
						data: JSON.stringify(idata),
						async success() {
							
						},
					});
					this.sublist = [{
						name: 'LPG',
						product_id: 'pg'
						}, {
						name: 'PP',
						product_id: 'pp'
						}, {
						name: 'PVC',
						product_id: 'v'
						}, {
						name: '塑料',
						product_id: 'l'
						}, {
						name: '桐榈',
						product_id: 'p'
						}, {
						name: '淀粉',
						product_id: 'cs'
						},{
						name: '焦炭',
						product_id: 'j'
						}, {
						name: '焦煤',
						product_id: 'jm'
						}, {
						name: '玉米',
						product_id: 'c'
						}, {
						name: '甘醇',
						product_id: 'eg'
						}, {
						name: '粳米',
						product_id: 'rr'
						}, {
						name: '纤板',
						product_id: 'fb'
						}, {
						name: '胶板',
						product_id: 'bb'
						}, {
						name: '苯乙烯',
						product_id: 'eb'
						}, {
						name: '豆一',
						product_id: 'b'
						}, {
						name: '豆二',
						product_id: 'a'
						}, {
						name: '豆油',
						product_id: 'y'
						}, {
						name: '豆粕',
						product_id: 'm'
						}, {
						name: '铁矿',
						product_id: 'i'
						}, {
						name: '鸡蛋',
						product_id: 'jd'
					}]
					
				} else if (numbers === 5) {
					// this.wsData=[]
					this.scrollHieght=117
					this.wsData=this.CZCEdata
					// this.wsData=this.czdata
					// let idata={tag: 'change',push:1,addr:'',my:this.zhengdata}
					let idata=''
					if(this.changelength==0){
						idata={tag: 'change',push:1,addr:'',my:this.zhengdata}
					}else{
						let num=this.changelength
						let rnum=this.changelength+10
						let cdata=[]
						for(let i=num;i<rnum;i++){
							cdata.push(this.czdata[i].instrument_id)
						}
						idata={tag: 'change',push:1,addr:'',my:cdata}
					}
					this.changeData=idata
					getApp().globalData.socketTask.send({
						data: JSON.stringify(idata),
						async success() {
							
						},
					});
					this.sublist = [{
						name: '尿素',
						product_id: 'UR'
						}, {
						name: '强麦',
						product_id: 'WH'
						}, {
						name: '早稻',
						product_id: 'RI'
						}, {
						name: '晚稻',
						product_id: 'LR'
						}, {
						name: '普麦',
						product_id: 'PM'
						}, {
						name: '棉纱',
						product_id: 'CY'
						}, {
						name: '棉花',
						product_id: 'CF'
						}, {
						name: '玻璃',
						product_id: 'FG'
						}, {
						name: '甲醇',
						product_id: 'MA'
						}, {
						name: '白糖',
						product_id: 'SR'
						}, {
						name: '短纤',
						product_id: 'PF'
						}, {
						name: '硅铁',
						product_id: 'SF'
						}, {
						name: '粳稻',
						product_id: 'JR'
						}, {
						name: '红枣',
						product_id: 'CJ'
						}, {
						name: '纯碱',
						product_id: 'SA'
						}, {
						name: '苹果',
						product_id: 'AP'
						}, {
						name: '菜油',
						product_id: 'OI'
						}, {
						name: '菜籽',
						product_id: 'RS'
						}, {
						name: '菜粕',
						product_id: 'RM'
						}, {
						name: '郑煤',
						product_id: 'AP'
						}, {
						name: '锰硅',
						product_id: 'SM'
					}]
					
				}else if(numbers === 6){
					this.scrollHieght=117
					this.getTableData()
					this.wsData=this.yedata
					// let idata={tag: 'change',push:1,addr:'',my:this.nightData}
					let idata=''
					if(this.changelength==0){
						idata={tag: 'change',push:1,addr:'',my:this.nightData}
					}else{
						let num=this.changelength
						let rnum=this.changelength+10
						let cData=[]
						for(let i=num;i<rnum;i++){
							cData.push(this.yedata[i].instrument_id)
						}
						idata={tag: 'change',push:1,addr:'',my:cData}
					}
					this.changeData=idata
					getApp().globalData.socketTask.send({
						data: JSON.stringify(idata),
						async success() {
							
						},
					});
					// yedata:[],//夜盘
					// let sixvalue=this.allData.filter(function(item,key,ary){
					// 	if(item.night){
					// 		return item
					// 	}
					// })
				}else{
					this.scrollHieght=80
					// this.myFutures()
					let num =this.myFuturesData.length
					// setTimeout(()=>{	
							this.wsData=this.myFuturesData
							try{
								if(num==0){
								let idata={tag: 'change',push:0,addr:'',my:[]}
								getApp().globalData.socketTask.send({
									data: JSON.stringify(idata),
									async success() {
										
									},
								});
								}else{
								let idata={tag: 'change',push:1,addr:'',my:this.myData}
								this.changeData=idata
								getApp().globalData.socketTask.send({
									data: JSON.stringify(idata),
									async success() {
										
									},
								});
							}
							}catch(e){
								// error
							}
						
					// },1000)
					
				}
				this.scroll_name = this.sublist[0].product_id
				this.subCurrent=0
				// setTimeout(()=>{
				// 	this.itemtab.backgroundColor=""
				// },500)
				// var param = {
				// 	id: 1,
				// 	addr: this.list[numbers].code
				// }
				// let param = {
				// 	tag: 'change',
				// 	addr:this.list[numbers].code,
				// 	push:1
				// }
				// getApp().globalData.connectSocket.onOpen((res) => {
					// getApp().globalData.socketTask.send({
					// 	data: JSON.stringify(param),
					// 	async success() {

					// 	},
					// });
				// })
			},
			//添加自选
			addUser() {
				// const userInfo = uni.getStorageSync('MEMBER_INFO')
				// let {islogin}=getApp().globalData
				const user = uni.getStorageSync('MEMBER_INFO')
				if(user){
					// this.current = 1
					// this.isShowNum = 1
					// this.wsData=this.allData
					// uni.setNavigationBarTitle({
					// 	title: this.list[this.current].name
					// })
					// this.getTableData()
					uni.navigateTo({
						url: './ranksearch/ranksearch?index=0'
					})
				}else{
					uni.navigateTo({
						url: '../../user/login/index?user=1'
					})
				}
			},
			//检查websocket是否连接
			checkOpenSocket() {
				let self = this;
				// this.changeData			 
				uni.sendSocketMessage({
					data:'ping',
					success: (res) => {
						return;
					},
					fail: (err) => { // 未连接打开websocket连接
						self.openConnection();
					}
				});
			},
			openConnection() { // 打开连接
				uni.closeSocket(); // 确保已经关闭后再重新打开
				this.connectSocketInit();
			},
			//初始化websocket
			connectSocketInit() {
				let {id} = uni.getStorageSync('MEMBER_INFO')
				// let {id}=userdata
				let randomNum = Math.random().toString().substring(2, 6)
				// wholeModel = this.model
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】47.102.157.67 / 192.168.43.133:2000
				getApp().globalData.socketTask = uni.connectSocket({				
					// url: "ws://192.168.0.233:9653/market?req=223&id="+randomNum+"&addr=''",
					url: "wss://md.sou-liang.com/market?req=223&id="+ randomNum+"&addr=''",
					success(data) {},
				});
				this.getWebsocketMsg();
			},
			//接收websocket发送的消息
			getWebsocketMsg() {
				let that=this			
				let param = {tag: 'more',push:1,my:this.inidata,addr:''}
				let params = {tag: 'change',push:1,my:this.inidata,addr:''}
				//消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				getApp().globalData.socketTask.onOpen((res) => {
					getApp().globalData.socketTask.send({
						data: JSON.stringify(param),
						async success() {
							// that.istime=true
						},
					});
					setTimeout(()=>{
						getApp().globalData.socketTask.send({
						data: JSON.stringify(params),
						async success() {
							// that.istime=true
						},
						});
					},1000)
					
					getApp().globalData.is_open_socket = true;
					getApp().globalData.socketTask.onMessage((res) => {
						// let adata=JSON.stringify(res.data)
						let arr = JSON.parse(res.data)
						// {obj.hasOwnProperty('name')
						// var value = JSON.parse(JSON.stringify(vm.value));
						if (arr.hasOwnProperty('amount')) {
								let newArr = this.wsData.length > 0 ? this.wsData : []
							// let that=this
								let keynum=0
								let text=''
								let keytext=-1
								// arr=JSON.stringify(arr)
								// arr=JSON.parse(arr)
								let newArr1 = newArr.map(function(item, key, ary) {								
									if (arr.instrument_id === item.instrument_id) {
										if(arr.last_price!=item.last_price){										
											arr['font']="1";							
											keynum=key									
										}
										if(arr.name!=item.name){
											text=item.name
											keytext=key
										}
										item = arr
									}
									// return item 
									return JSON.parse(JSON.stringify(item))
								});	
									this.wsData = newArr1
									if(text){
										this.wsData[keytext].name=text
									}
								setTimeout(()=>{
									this.wsData[keynum].font=0
								},200)							
							// }						
						} else {
							if (arr) {
								//主力																
								this.allData=arr.master
								if(this.current==1)this.wsData=this.allData;
								this.shdata=arr.shfe  //上期
								this.dcdata=arr.dce //大商
								this.czdata=arr.czce //郑商
								this.cfdata=arr.cffex  //中金
								this.niData=arr.night  //夜盘
								// if(this.current==1){
								// 	this.wsData=this.allData
								// }else 
								if(this.current==2){
									this.wsData=this.cfdata
								}else if(this.current==3){
									this.wsData=this.shdata
								}else if(this.current==4){
									this.wsData=this.DCEdata
								}else if(this.current==5){
									this.wsData=this.CZCEdata
								}else if(this.current==6){
									this.wsData=this.yedata
								}else if(this.current==0){
									this.wsData=this.myFuturesData
								}
								this.inidata=[] 
								if(arr.master.hasOwnProperty('hl')){
									
								}else{
									arr.master['hl']='0';
								}
								uni.setStorageSync('zuli_key', arr.master)//主力
								for(let i=0;i<10;i++){
									this.inidata.push(this.allData[i].instrument_id)
								}
								let idata=''
								if(this.changeData!=''){
									idata=this.changeData
								}else{
									idata={tag: 'change',push:1,addr:'',my:this.inidata,}
								}
								getApp().globalData.socketTask.send({
									data: JSON.stringify(idata),
									async success(){
									},
								});																							
								//上期所								
								// this.shdata=thevalue
								uni.setStorageSync('SHFE_key', arr.shfe)//上期
								this.shangdata=[]
								this.SHFEdata=[]
								if(arr.shfe.hasOwnProperty('hl')){
									
								}else{
									arr.shfe['hl']='0';
								}
								for(let i=0;i<20;i++){
									this.SHFEdata.push(this.shdata[i])
									this.shangdata.push(this.shdata[i].instrument_id)
								}
								//大商所
								// this.dcdata=fvalue
								uni.setStorageSync('DCE_key', arr.dce)//大商
								this.dadata=[]
								this.DCEdata=[]
								for(let i=0;i<20;i++){
									this.DCEdata.push(this.dcdata[i])
									this.dadata.push(this.dcdata[i].instrument_id)
								}
								//CZCEdata:[],//郑商所
								
								// this.czdata=fivalue
								uni.setStorageSync('CZCE_key', arr.czce)//郑商
								this.zhengdata=[]
								this.CZCEdata=[]
								for(let i=0;i<20;i++){
									this.CZCEdata.push(this.czdata[i])
									this.zhengdata.push(this.czdata[i].instrument_id)
								}
								// this.scroll_name=arr[0].product_id
								uni.setStorageSync('ninght_key', arr.night)//夜
								this.nightData=[]
								this.yedata=[]
								for(let i=0;i<20;i++){
									this.yedata.push(this.niData[i])
									this.nightData.push(this.niData[i].instrument_id)
								}
								//中金所
								// })
								if(arr.cffex.length!=0){
									uni.setStorageSync('CFFEX_key', arr.cffex)//中金
									this.zhongdata=[]
									// this.cfdata=twovalue
									for(let i=0;i<10;i++){
										// this.CFFEXdata.push(this.cfdata[i])
										this.zhongdata.push(this.cfdata[i].instrument_id)
									}
								}							
							}else{
								this.getsortData()
							}
						}
					});
				})
				// 这里仅是事件监听【如果socket关闭了会执行】
			},
			//关闭websocket【离开这个页面的时候执行关闭】
			closeSocket() {
				getApp().globalData.socketTask.close({
					success(res) {
						getApp().globalData.is_open_socket = false;
						getApp().globalData.isHide=true
					},
					fail(err) {}
				})
			},
			//'&item=' + encodeURIComponent(JSON.stringify(item))+.slice(5)
			linkTo(item, index) {
				this.state=false
				getApp().globalData.rankDetail=item
				let num=getApp().globalData.IDnum
				
				uni.navigateTo({
					// url: '/pages/tabBar/rankDetail/rankDetail?&id='+item.instrument_id+'&item=' + encodeURIComponent(JSON.stringify(item))
					url: '/pages/tabBar/rankDetail/rankDetail?bg=' + item.hlFlag + '&id='+item.instrument_id+'&index='+num
					// url: '/pages/tabBar/rankDetail/rankDetail?bg=' + item.hlFlag + '&id='+item.instrument_id+'&last_price='+item.last_price+'&pre_settlement='+item.pre_settlement
					// url: '/pages/tabBar/rankDetail/rankDetail?&item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			//	获取行情信息
			getRank() {
				const type = this.types[this.type]
				getSocket(`ws://47.102.157.67:8080`,
				        JSON.stringify(params),(data, ws) => {
				            // 保存数据对象, 以便发送消息
				            this.wsData = ws;
				        }
				    );
				socket.on('connect', function() {
					socket.emit('joinQuotationGroup', {
						type: type.val
					})
				})
				//this.wsData.send(JSON.stringify(params));

				socket.on('quotation', data => {
					if (this.isInit) {
						setRankList(data)
					}
					this.isInit = false
					this.dataList = data
					uni.hideLoading()
				})

				socket.on('disconnect', () => {
					this.dataList = []
					uni.hideLoading()
				})

				socket.on('connect_error', () => {
					this.dataList = []
					uni.hideLoading()
					// socket.disconnect()
				})
			},
			//	切换类型
			onClickType(item, key) {
				this.$refs['showtype'].close()
				this.type = key
				uni.$emit('sub-popup', {
					item,
					key
				})
				// uni.showLoading({ title: '加载中', mask: true })
				socket.emit('joinQuotationGroup', {
					type: item.val
				})
			},
			//	是否显示行情
			changeTypeShow(status) {
				if (!status.show) {
					uni.$emit('sub-popup', {})
				}
			},
			//	展开切换
			onSwitchType(item, key, bool) {
				this.$set(this.rankTypes, key, { ...item,
					enable: bool
				})
			},
			onClickAddRank() {
				toRankSearchPage()
			},
			//	获取位置
			getPosition(item, key) {
				const {
					typeKey,
					typeList
				} = this
				const length = typeList.length
				const cur = typeKey + 2
				const ind = (length <= cur ? cur - length : cur)
				return key === ind
			},
			//	写入类型 key
			setTypeKey(num) {
				const {
					typeKey,
					typeList
				} = this
				const length = typeList.length
				const cur = typeKey + num
				const number = cur < 0 ? length - 1 : cur > length - 1 ? 0 : cur
				this.typeKey = number
			},
			//	改变时会触发 change 事件ss
			onChangeType(e) {
				const {
					current
				} = e.detail
				this.typeKey = current
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-scroll-view-content {
		width: 100%;
		height: 0
	}
	.swiper{
		height: 100%;
	}
	.loading-class{
		position: absolute;
		top: 40%;
		left: 49%;
	}
	.rank-page {
		height: 100vh;
		background-color: #FFFFFF;
		overflow: hidden;
		.rank-scroll {
			position: relative;
			height: 100%;
			.bottom-wrap {
				width: 100%;
				position: absolute;
				height: 46px;
				bottom: -8rpx;
			}
		}

		.head {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background: #FFFFFF;
			text-align: center;
			font-size: 32rpx;
		}

		.rank-head {
			color: #cdcdcd;
			height: 80rpx;
			display: flex;
			align-items: stretch;
			top: 0;
			left: 0;
			right: 0;
			z-index: 50;
			position: sticky;
			background: #636363;

			.item-name,
			.item-price,
			.item-percent,
			.item-interest {
				display: flex;
				padding: 0 20rpx;
				align-items: center;
			}

			.item-name {
				width: 25%;
				text-align: left;
				padding-left: 20rpx;
				background-color: #444;
			}

			.item-price {
				width: 25%;
				text-align: right;
				justify-content: flex-end;
				background-color: #444;
			}

			.item-percent {
				width: 25%;
				text-align: right;
				justify-content: center;
				background-color: #636363;
			}

			.item-interest {
				width: 25%;
				text-align: right;
				justify-content: center;
				background-color: #636363;
			}
		}

		.rank-list {
			.rank-item {
				height: 80rpx;
				display: flex;
				align-items: center;

				&:after {
					border-color: #1E1E1E;
				}

				&:last-child:after {
					display: none;
				}
			}

			.rank-item.active {

				.item-price,
				.item-percent {
					color: #C43223;
				}

				.price-limit {
					background: #CB1D14;
				}
			}

			.price-limit {
				color: #fff;
				padding: 4rpx 10rpx;
				background: #03B016;
				border-radius: 6rpx;
			}

			.item-name {
				width: 25%;
				color: #E5C147;
				text-align: left;
				padding-left: 20rpx;
			}

			.item-price {
				width: 25%;
				color: #00B34F;
				text-align: right;
			}

			.item-percent {
				width: 25%;
				color: #00B34F;
				text-align: right;
			}

			.item-interest {
				width: 25%;
				color: #A9A9A9;
				text-align: right;
				padding-right: 20rpx;
			}
		}

		.tabstl {
			width: 100%;
			height: 33px;
			color: #818181;
			background-color: #dddddd;
			margin-top: 0rpx;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			line-height: 66rpx;
			padding: 0 20rpx 0 20rpx;

			.tb-l {}

			.tb-r {
				width: 430rpx;
				display: flex;
				justify-content: space-between;
			}
		}

		.item-sp {
			width: 750rpx;
			height: 110rpx;
			border-bottom: 1rpx solid #f0f0f0;
			background-color: #fff;
			padding: 16rpx 20rpx 16rpx 20rpx;
			display: flex;
			justify-content: space-between;

			.sp-left {
				width: 260rpx;
				line-height: 80rpx;
				display: flex;
				justify-content: space-between;
			}

			.sp-l {
				width: 240rpx;
				height: 110rpx;

				.sp-l-t {
					font-size: 30rpx;
					font-weight: bold;
					color: #1b1b1b;
				}

				.sp-l-m {
					height: 32rpx;
					margin-top: 5rpx;
					// background-color: #808080;
					display: flex;
					justify-content: flex-start;

					.sp-l-m-1 {
						width: 22rpx;
						height: 32rpx;
						text-align: center;
						line-height: 32rpx;
						border-radius: 3rpx;
						background-color: #faaf3c;
						font-size: 18rpx;
						// text-align: center;
						color: #fff;
					}

					.sp-l-m-2 {
						height: 26rpx;
						font-size: 16rpx;
						color: #9e9e9e;
						margin-left: 5rpx;
					}
				}

			}

			.sp-r {
				// width: 432rpx;
				width: 100%;
				height: 110rpx;
				display: flex;
				justify-content: flex-end;
				// .cont{}
				font-size: 15px;
				font-weight: bold;
				.new-price {
					min-width:130rpx;
					height: 50rpx;					
					// font-weight: 600;				
					line-height: 50rpx;
					margin: 20rpx 15px 0 30px;
					text-align: center;
					// font-weight: bold;
					flex: 1;
				}
				.redprise{
					color: #fa4439;
				}
				.greenprise{
					color: #18B566;
				}
				.rayprise{
					color: #b5b4b4;
				}
				.up-data {
					min-width: 124rpx;
					height: 48rpx;
					background-color: #fa4439;
					border-radius: 6rpx;
					margin-top: 20rpx;
					// margin-left: 30px;
					line-height: 48rpx;
					text-align: center;
					color: #fff;
				}

				.down-data {
					min-width: 124rpx;
					height: 48rpx;
					background-color: #18B566;
					border-radius: 6rpx;
					margin-top: 20rpx;
					line-height: 48rpx;
					text-align: center;
					color: #fff;
				}

				.stop-data {
					font-size: 30rpx;
					font-weight: bold;
					min-width: 124rpx;
					height: 48rpx;
					background-color: #b5b4b4;
					border-radius: 6rpx;
					margin-top: 20rpx;
					line-height: 48rpx;
					text-align: center;
					color: #fff;
				}

				.turnover {
					// font-size: 28rpx;
					color: #292929;
					line-height: 80rpx;
					flex: 1;
					text-align: right;
					// margin-left: 5px;
				}
			}
		}

		.myself-add {
			width: 80%;
			margin-left: 10%;
			height: 75rpx;
			border: 1rpx solid #ededed;
			border-radius: 30rpx;
			background-color: #fff;
			display: flex;
			justify-content: center;
			// position: fixed;
			margin-top: 10%;
			margin-bottom: 10%;

			.myself-add-f {
				width: 30rpx;
				height: 30rpx;
				border: 3rpx solid #faae3e;
				border-radius: 50%;
				font-size: 16rpx;
				text-align: center;
				line-height: 24rpx;
				color: #faae3e;
				margin-top: 18rpx;
			}

			.myself-add-t {
				margin-top: 18rpx;
				margin-left: 20rpx;
				font-size: 30rpx;
				color: #faae3e;
			}
		}

		.type-list {
			display: flex;
			flex-wrap: wrap;
			background-color: #000;

			.type-item.active {
				.type-name {
					color: #777;
				}
			}

			.type-item {
				width: 33.33%;
				height: 80rpx;
				position: relative;

				&:nth-child(3n) {
					&:after {
						border-right: none;
					}
				}

				&:nth-child(n + 4) {
					&:after {
						border-top: none;
					}
				}

				&:after {
					border-color: #6A6A6A;
					border-left: none;
				}

				.type-box {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.type-name {
					color: #fff;
				}
			}
		}

		.rank-foot--height {
			height: 100rpx;
		}

		.rank-foot {
			left: 0;
			right: 0;
			bottom: 0;
			height: 100rpx;
			display: flex;
			position: fixed;
			align-items: stretch;
			background-color: #444;

			.foot-left,
			.foot-right {
				width: 100rpx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;

				.foot-icon {
					font-size: 48rpx;
				}
			}

			.foot-swiper {
				width: 550rpx;
				height: 100rpx;
			}

			.foot-item {
				color: #a9a9a9;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.foot-item.active {
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}
		// font-weight: bold !important;
	.font{
		background-color: #fdf7f7;
	}
</style>
